<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <section class="panel">
                <header class="panel-heading">
                    故障工单
                </header>
                <div class="col-lg-12">
                    <%--<div class="search">--%>
                    <form id="adCompany_select_form">
                        <label style="color: #737B83;">广告牌编号:</label>
                        <input type="text" class="txt" id="code" name="code" placeholder="广告牌编号的关键字"
                               style="margin-top: 10px;"/>&nbsp;&nbsp;&nbsp;
                        <label style="color: #737B83;">维修人:</label>
                        <select style="width: 100px; margin-top: 10px;" id="repairManId" name="repairManId">
                            <option value=""></option>
                            <c:forEach items="${wxUser}" var="item">
                                <option value="${item.id}">${item.realName}</option>
                            </c:forEach>
                        </select>&nbsp;&nbsp;&nbsp;
                        <label style="color: #737B83;">处理结果:</label>
                        <select style="width: 100px; margin-top: 10px;" id="result" name="result">
                            <option value=""></option>
                            <option value="1">已处理</option>
                            <option value="0">未处理</option>
                        </select>&nbsp;&nbsp;&nbsp;
                        <input type="button" id="search" class="btn" onclick="billboardMalfunctionPage.select()"
                               value="搜索"/>
                        <input type="reset" id="return" class="btn" onclick="load()" value="重置"/>
                    </form>
                    <%--</div>--%>
                </div>
                <div class="panel-body">
                    <table class="table table-striped table-bordered sortable">
                        <thead>
                        <tr>
                            <th>广告牌</th>
                            <th>维修人</th>
                            <th>推送次数</th>
                            <th>上次推送时间</th>
                            <th>处理结果</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="billboardMalfunction-list-body">

                        </tbody>
                    </table>
                    <div class="text-center">
                        <ul class="pagination">

                        </ul>
                    </div>
                </div>
            </section>
        </div>
    </div>
</section>

<script type="text/template" id="billboardMalfunction-list-template">
    <@ _.each(items, function (item) { @>
    <tr>
        <td><@= item.code @></td>
        <td><@= item.repairMan==null?"":item.repairMan.realName @></td>
        <td><@= item.pushedCount @></td>
        <td><@= getFormatDateByString(item.lastPushDate, "yyyy-MM-dd hh:mm:ss") @></td>
        <td><@= item.result==true?'已处理':'未处理'@></td>
        <td>
            <button class="btn btn-success btn-xs"
                    onclick="oceanModal.openDefault('billboardMalfunction/details?id=<@= item.id @>')">详情
            </button>
        </td>
    </tr>
    <@ }); @>
</script>
<script type="text/template" id="billboardMalfunction-page-template">
    <@ for(var index=1;index<=totalPages;index++) { @>
    <@ if(number==index-1) {@>
    <li class="active"><a href="javascript:void(0)" data-index="<@=index @>"><@=index @></a></li>
    <@ } else { @>
    <li><a href="javascript:void(0)" data-index="<@=index @>"><@=index @></a></li>
    <@ }} @>
</script>
<script type="application/javascript">
    function load(page) {
        if (page == null) {
            page = 1;
        }
        WaitingDialog.show();
        $.post("resources/billboardMalfunction/list", {page: page}, function (data) {
            console.log(data);
            WaitingDialog.dismiss();
            if (data == null) {
                return;
            }
            var tmpl = _.template($('#billboardMalfunction-list-template').html());
            $('#billboardMalfunction-list-body').html(tmpl({items: data.content}));

            var tmpl_page = _.template($('#billboardMalfunction-page-template').html());
            $('.pagination').html(tmpl_page({totalPages: data.totalPages, number: data.number}));

            $('.pagination a').click(function () {
                load($(this).data("index"));
            });
        });
    }
    load();

    var billboardMalfunctionPage = {
        select: function (page) {
            if (page == null) {
                page = 1;
            }
            var code, repairManId, result;
            code = $('#code').val();
            repairManId = $('#repairManId').val();
            result = $('#result').val();
            WaitingDialog.show();
            $.post("resources/billboardMalfunction/select", {
                code: code,
                repairManId: repairManId,
                result: result,
                page: page
            }, function (data) {
                console.log(data);
                WaitingDialog.dismiss();
                if (data == null) {
                    return;
                }
                var tmpl = _.template($('#billboardMalfunction-list-template').html());
                $('#billboardMalfunction-list-body').html(tmpl({items: data.content}));
                var tmpl_page = _.template($('#billboardMalfunction-page-template').html());
                $('.pagination').html(tmpl_page({totalPages: data.totalPages, number: data.number}));

                $('.pagination a').click(function () {
                    billboardMalfunctionPage.select($(this).data("index"));
                });
            });
        }
    }
</script>
